<template>
  <div id="emsCommon">
    <div class="left-box">
      <div class="header-title font24">
        <div class="title-line"></div>
        <span class="chart-title">能耗走势 <em>({{trendTitle}})</em><span style="margin-left: 10px; font-size: 16px;">{{unit}}</span></span>
        <div class="rt">
          <span :class="{'gather-bg': trend}" @click="sameTotal(1)"><Icon type="ios-arrow-back"/>汇总</span>
          <span :class="{'gather-bg': !trend}" @click="sameSingle(1)">单车<Icon type="ios-arrow-forward"/></span>
        </div>
      </div>
      <div id="energyTrend" ref="energyTrend"></div>
    </div>
    <div class="right-box">
      <div class="top-square">
        <div :class="[index ? 'single' : 'total']" v-for="(item, index) in totalSingle" :key="index">
          <div class="header-title">
            <div class="title-line"></div>
            <span class="chart-title">{{item.type}}<em>{{item.unit}}</em></span>
          </div>
          <div class="big-num">{{item.useNum}}</div>
          <div class="chain-kpi">
            <div class="total-chain">环比</div>
            <div class="total-kpi">KPI</div>
          </div>
          <div class="chain-kpi-data">
            <div class="per-num">{{item.lastPeriod}}<span class="sm-per"><Icon
              :type="item.lastPeriod.indexOf('+') === -1 ? 'md-arrow-down' : 'md-arrow-up'" size="20"
              :color="item.lastPeriod.indexOf('+') === -1 ? '#E66770' : '#57CFBF'"/></span></div>
            <div class="per-num">{{item.kpi}}<span class="sm-per"><Icon
              :type="item.lastPeriod.indexOf('+') === -1 ? 'md-arrow-down' : 'md-arrow-up'" size="20"
              :color="item.lastPeriod.indexOf('+') === -1 ? '#E66770' : '#57CFBF'"/></span></div>
          </div>
        </div>
      </div>
      <div class="center-square">
        <div class="header-title table-title">
          <div class="title-line"></div>
          <span class="chart-title">同类对比<span style="margin-left: 10px; font-size: 16px;">{{unit}}</span></span>
          <!--          <div class="toggle-all-single">-->
          <!--            <span :class="{'gather-carbon': sameType}" @click="sameTotal(2)"><Icon type="ios-arrow-back"/>汇总</span>-->
          <!--            <span :class="{'gather-carbon': !sameType}" @click="sameSingle(2)">单车<Icon type="ios-arrow-forward"/></span>-->
          <!--          </div>-->
        </div>
        <div class="ems-table m-chart-table" id="ems-table">
          <i-table
            stripe size="small" :height="autoHeight" :width="autoWidth"
            :columns="sameCompareTable.sameCompareColumns"
            :data="sameCompareTable.sameCompareData"></i-table>
        </div>
      </div>
      <div class="bottom-square">
        <div class="past-compare">
          <div class="header-title">
            <div class="title-line"></div>
            <span class="chart-title">过往对比<em>（近四年）</em><span style="margin-left: 6px; font-size: 16px;">{{unit}}</span></span>
          </div>
          <div id="pastCompare" ref="pastCompare"></div>
        </div>
        <div class="go-next" @click="goNextPage">
          <span></span>
          <div>更多分析 <Icon type="ios-arrow-forward" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    // 组件的名称
    name: 'emsCommon',
    // props 可以是数组或对象，用于接收来自父组件的数据
    props: {
      // 同类对比 的表格
      sameCompareTable: {
        type: Object,
        default: () => {
          return {
            sameCompareColumns: [],
            sameCompareData: []
          }
        }
      },
      // 总的和单车
      totalSingle: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 跳转二级路由的 数据对象
      // twoPageObj: {
      //   type: Object,
      //   default: () => {
      //     return {
      //       dev: '',
      //       productionLine: ''
      //     }
      //   }
      // },
      // 走势 title
      trendTitle: {
        type: String,
        default: ''
      },
      // 单位
      unit: {
        type: String,
        default: ''
      },
      // 走势 汇总 | 单车
      trend: {
        type: Boolean,
        default: true
      }
    },
    // 数据绑定
    data () {
      return {
        autoHeight: null,
        autoWidth: null
      }
    },
    // 组件
    components: {},
    // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
    // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
    // 方法
    methods: {
      // 跳转二级页面
      goNextPage () {
        this.$emit('goNextPage')
      },
      // 同类对比 的 点击方法
      sameTotal (num) {
        this.$emit('sameTotal', num)
      },
      sameSingle (num) {
        this.$emit('sameSingle', num)
      }
    },
    // 计算属性
    computed: {},
    // 监听
    watch: {
      // 监听路由变化
    },
    // 常用钩子函数，总共有8个，可以参照vue的生命周期看
    // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
    created () {
    },
    // 完成挂载，相当于dom ready
    mounted () {
      // 监听 浏览器窗口大小的 问题 适应 iView table
      if (document.documentElement.clientWidth < 1921) {
        this.autoHeight = 280
        this.autoWidth = 664
      } else {
        this.autoHeight = 382
        this.autoWidth = 850
      }
      window.addEventListener('resize', () => {
        if (document.documentElement.clientWidth < 1921) {
          this.autoHeight = 280
          this.autoWidth = 664
        } else {
          this.autoHeight = 382
          this.autoWidth = 850
        }
      })
    },
    // 销毁，可以做一些定时器的销毁,缓存的清除等操作
    destroyed () {
    }
  }
</script>

<style lang="scss">
  #energyTrend {
    height: 700px;
    width: 1050px;
    margin: 0 auto;
  }

  #pastCompare {
    height: 186px;
    width: 430px;
    margin: 0 auto;
  }

  @media screen and (min-width: 1921px) {
    /*.ivu-table table {*/
    /*  height: 342px;*/
    /*}*/
    .ivu-table-small td {
      height: 54px;
    }
    .ems-table .ivu-table-header thead > tr {
      height: 50px;
    }
    #energyTrend {
      height: 900px;
      width: 1500px;
    }
    #pastCompare {
      height: 280px;
      width: 560px;
    }
    .out-wrapper-border {
      width: 60% !important;
      height: 60% !important;

      .figure {
        margin: 26px 0 !important;
      }
    }
  }

  #emsCommon {
    height: 100%;
    font-family: PingFang SC;
    padding: 20px;
    display: flex;
    .ems-table .ivu-table td {
      font-size: 14px;
    }
    .left-box {
      margin-right: 20px;
      flex: 1;
      height: 100%;
      padding: 20px;
      background: $sbgc;
      @include head-title(60px, 20px, rgba(20, 202, 255, 1), rgba(20, 202, 255, 1), 20px);

      .font24 {
        font-size: $font-24;
        margin-bottom: 20px;
      }

      div.rt {
        padding-right: 50px;

        span {
          color: $font-f;
          padding: 0 10px;
          font-size: 12px;

          &:hover {
            cursor: pointer;
          }
        }

        .gather-bg {
          color: rgba(20, 202, 255, 1);
          font-size: 18px;
        }
      }
    }

    .right-box {
      flex: 0 0 35%;
      display: flex;
      flex-direction: column;
      /*height: 930px;*/
      .top-square {
        flex: 1;
        display: flex;
        height: 100%;

        .total {
          height: 100%;
          @include head-title(20px, 14px, rgba(20, 202, 255, 1), rgba(20, 202, 255, 1), 20px);
          /*height: 284px;*/
          width: 50%;
          margin-right: 20px;
          background: $sbgc;

          .big-num {
            @include big-num(rgba(20, 202, 255, 1));
          }

          .chain-kpi {
            display: flex;
            margin: 0 10px 0px;
            justify-content: space-around;

            .total-chain {
              @include total-chain(rgba(20, 202, 255, 1), rgba(20, 202, 255, 1), rgba(20, 202, 255, .12));
            }

            .total-kpi {
              @include total-chain(rgba(20, 202, 255, 1), rgba(20, 202, 255, 1), rgba(20, 202, 255, .12));
            }
          }

          .chain-kpi-data {
            display: flex;
            justify-content: space-around;
            align-items: center;
            @include per-num;
          }
        }

        .single {
          height: 100%;
          @include head-title(20px, 14px, rgba(255, 173, 0, 1), rgba(255, 173, 0, 1), 20px);
          width: 50%;
          background: $sbgc;
          /*height: 284px;*/
          /* 右边的方块中的用量数据 big-num ($fontcolor) */
          .big-num {
            @include big-num(rgba(255, 173, 0, 1));
          }

          .chain-kpi {
            display: flex;
            margin: 0 10px 0px;
            justify-content: space-around;

            .total-chain {
              /* 环比跟pki的公共样式 total-chain ($bordercolor, $fontcolor, $bgcolor)*/
              @include total-chain(rgba(255, 173, 0, 1), rgba(255, 173, 0, 1), rgba(255, 173, 0, .12));
            }

            .total-kpi {
              /* 环比跟pki的公共样式 total-chain ($bordercolor, $fontcolor, $bgcolor)*/
              @include total-chain(rgba(255, 173, 0, 1), rgba(255, 173, 0, 1), rgba(255, 173, 0, .12));
            }
          }

          .chain-kpi-data {
            margin: 14px 0 28px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            @include per-num;
          }
        }
      }

      .center-square {
        #ems-table {
          opacity: 1;
          flex: 1;
        }

        margin: 20px 0;
        /*height: 100%;*/
        /*height: 358px;*/
        /*background: $sbgc;*/
        /*$lineheight--线条的高度， $linecolor--线条的颜色 ， $fontcolor--字体颜色， $fontsize--字体大小
         @mixin head-title ($margintop, $lineheight, $linecolor ,$fontcolor, $fontsize)*/
        @include head-title(0px, 14px, rgba(20, 202, 255, 1), rgba(20, 202, 255, 1), 20px);

        .table-title {
          padding: 24px 0;
          background: $sbgc;
        }

        .toggle-all-single {
          float: right;
          color: rgba(255, 255, 255, 0.9);

          .gather-carbon {
            color: rgba(20, 202, 255, 1);
            font-size: 18px;
          }

          span {
            padding: 0 10px;
            font-size: 12px;

            &:hover {
              cursor: pointer;
            }
          }
        }
      }

      .bottom-square {
        flex: 1;
        display: flex;
        height: 100%;

        .past-compare {
          height: 100%;
          /*height: 248px;*/
          width: 65%;
          margin-right: 20px;
          background: $sbgc;
          @include head-title(20px, 14px, rgba(20, 202, 255, 1), rgba(20, 202, 255, 1), 20px);
        }

        .go-next {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: 35%;
          font-size:20px;
          font-family:PingFang SC;
          font-weight:bold;
          background: $sbgc;
          color:rgba(20,202,255,1);
          span {
            display: inline-block;
            width: 58px;
            height: 54px;
            background: url('../../../assets/newEms/ems_more.png') no-repeat center center;
            background-size: 100% 100%;
            margin: 0 6px 16px 0;
          }
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
